fix(a11y): raise --color-text-secondary to gray-600 for WCAG AA contrast#496
Conversation
Closes LLM-Coding#492 (the Lighthouse CI accessibility gate). The Lighthouse CI job has been red on every main run since 2026-05-14: the homepage scored 0.97 on accessibility, below the gate's required 1.0. The whole 0.97 came from the color-contrast audit. --color-text-secondary was gray-500 (#6b7280). On --color-bg-secondary (#f3f4f6) — the hero's "without semantic anchor" example card — that is ~4.1:1, below the WCAG AA 4.5:1 threshold. Raised to gray-600 (#4b5563), which clears 4.5:1 on both --color-bg and --color-bg-secondary. Dark mode already passed and is unchanged. Also dropped the opacity-60 from the footer's "(DE)" / "(EN)" language tags, which pushed those spans below the threshold regardless of the token. Verified locally with the exact CI setup (desktop preset, Lighthouse 12.6.1): accessibility now 1.0, color-contrast passes. Note: the label-content-name-mismatch audit still flags the anchor cards, but it carries weight 0 in Lighthouse's accessibility score and does not affect the gate. Its root cause is the card's role="button" wrapping nested interactive elements (copy/edit) — an architectural fix tracked separately, not bundled here. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
WalkthroughDas Pull Request aktualisiert die sekundäre Textfarbe in der Stilvorlage und vereinfacht die Footer-Beschriftungen. Die CSS-Variable ChangesFooter-Accessibility — Farbkontrast
🎯 1 (Trivial) | ⏱️ ~3 Minuten 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
2 participants
Closes #492.
Problem
The Lighthouse CI job has been red on every
mainrun since 2026-05-14 (12+ runs). The homepage scored 0.97 on accessibility; the gate (website/.lighthouserc.json) requires 1.0. The entire 0.97 came from thecolor-contrastaudit.Fix
--color-text-secondarywas gray-500 (#6b7280). On--color-bg-secondary(#f3f4f6) — the hero's "without semantic anchor" example card — that is ~4.1:1, below the WCAG AA 4.5:1 threshold. Raised to gray-600 (#4b5563), which clears 4.5:1 on both--color-bgand--color-bg-secondary. Dark mode already passed and is unchanged.Also dropped
opacity-60from the footer's "(DE)" / "(EN)" language tags, which pushed those spans below the threshold regardless of the token.Verified locally with the exact CI setup (desktop preset, Lighthouse 12.6.1): accessibility 1.0,
color-contrastpasses, 90 unit tests green.Out of scope
The
label-content-name-mismatchaudit still flags the anchor cards, but it carries weight 0 in Lighthouse's accessibility score and does not affect the gate. Its root cause is the card'srole="button"wrapping nested interactive elements (copy/edit buttons) — an architectural fix that deserves its own PR rather than being bundled here.Test plan
🤖 Generated with Claude Code
Summary by CodeRabbit
Diese Version enthält Verbesserungen der Benutzeroberfläche und der Barrierefreiheit. Die Farbkontraste wurden angepasst um die Lesbarkeit zu erhöhen, und die Sprachkennzeichnungen in der Fußzeile wurden vereinfacht dargestellt.
Bug Fixes
Style